<template>
  <div>
    <!-- 导航 -->
    <!-- <van-nav-bar title="影院" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
    <van-nav-bar title="影院" :left-text="cityname" @click-left="onClickLeft" />
    <!-- 下拉检索 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <!-- 列表展示 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <template v-if="list.length === 0">
        <van-skeleton v-for="item in 20" :key="item" title :row="2" />
      </template>
      <template v-else>
        <van-cell v-for="item in list" :key="item.cinemaId">
          <template #title>
            <items :itemData="item" />
          </template>
        </van-cell>
      </template>
    </van-list>
  </div>
</template>

<script>
import items from './ui/items.vue'
import { getCinemaListApi } from '@/api/cinemaApi'
export default {
  components: {
    items
  },
  data() {
    return {
      value1: 0,
      value2: 'a',
      value3: '11111',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ],
      option3: [
        { text: '最近去过', value: '11111' },
        { text: '222222', value: '2222' },
        { text: '33333', value: '33333' }
      ],
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  computed: {
    cityname() {
      return this.$store.getters.cityname
    }
  },
  mounted() {
    this.onLoad()
  },
  watch: {
    value1(nv) {
      getCinemaListApi(this.page, { value1: nv }).then(ret => console.log(ret))
    }
  },
  methods: {
    onClickLeft() {
      // 回退
      // this.$router.back()
      this.$router.push('/city')
    },
    async onLoad() {
      let ret = await getCinemaListApi(this.page)
      if (ret.length > 0) {
        this.list.push(...ret)
        this.page++
        // 加载状态结束
        this.loading = false
      } else {
        // 数据全部加载完成
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
